<template>
    <a-modal
        :bodyStyle="{maxHeight: '70vh', overflowY: 'auto' }"
        :destroyOnClose="true"
        :title="title"
        :width="width"
        :visible="visible"
        :confirmLoading="confirmLoading"
        :maskClosable="maskClosable"
        v-drag
        @ok="ok"
        @cancel="cancel"
        cancelText="关闭"
        :ok-button-props="{ props: { shape:'round'} }"
        :cancel-button-props="{ props: { shape:'round'} }">
        
        <a-spin :spinning="confirmLoading">
            <div class="table-page-search-wrapper">
                <LForm v-if="formAttributes" ref="LForm"  @clickEventHandler="clickEventHandler"  @changeEventHandler="changeEventHandler" :formAttributes="formAttributes" :mostColumns="mostColumns" :labelCol="labelCol" :wrapperCol="wrapperCol"></LForm>
                <component v-if="component" :is="component" :componentParam="componentParam"></component>
            </div>
        </a-spin>
    </a-modal>
</template>

<script>

import LForm from './LForm'
export default {
    name:'LModalForm',
    components:{LForm},
    props:{
        mostColumns:{
            type:Number,
            default:1
        },
        formAttributes:{
           type:Object,
           default:()=>{}
        },
        component:Object | Function,
        componentParam:{
            type:Object,
            default:()=>{}
        },
        title:String,
        width:{
            type:Number,
            default:800
        },
        maxHeight:{
            type:Number,
            default:600
        },
        visible:{
            type:Boolean,
            default:false
        },
        confirmLoading:{
            type:Boolean,
            default:false
        },
        maskClosable:{
            type:Boolean,
            default:true
        },
        labelCol:{
            type:Object,
            default:function(){
                return {sm: { span: 8 }}
            }
        },
        wrapperCol:{
            type:Object,
            default:function(){
                return {sm: { span: 16 }}
            }
        },
        handleOk:Function,
        handleCancel:Function,
  
    },
    data(){
        return{
        }
    },
    created(){
        
    },
    methods:{
        ok(){
            this.$emit('handleOk');
            this.$destroyAll();
        },
        cancel(){
            this.$emit('handleCancel');
            this.$destroyAll();
        },
        /**
         * 获取form对象
         */
        getForm(){
            return this.$refs.LForm.form
        },
        changeEventHandler(changeItem){
            this.$emit('changeEventHandler',changeItem);
        },
        clickEventHandler(field,form){
            this.$emit('clickEventHandler',field,form);
        }
       
    }
}
</script>